<template>
	<!-- 收货地址页面 -->
	<view class="address-page">
		<!-- 暂无地址 -->
		<!-- <view class="empty-address"> -->
		<!-- 暂无地址图片 -->
		<!-- <image class="empty-address-icon" src="/static/image/emptyAddress.png"></image> -->
		<!-- 暂无地址文本 -->
		<!-- <text class="empty-address-text">暂无地址</text> -->
		<!-- 信息盒子 -->
		<view class="msg-box">
			<!-- 信息区域 -->
			<view class="msg-area">
				<!-- 地址信息 -->
				<view class="msg-address">asd 123489 apzxngreiqvbw
					<!-- 详细地址信息 -->
					<view class="msg-detailed-address">zpqnguc</view>
				</view>
				<!-- 修改信息盒子 -->
				<view class="amend-msg-box">
					<!-- 修改编辑信息 -->
					<image class="amend-msg" @click="editAddress" src="/static/image/orderEdit.png"></image>
				</view>
			</view>
		</view>
	</view>
	<view>
		<button @click="subAddressList" class="add-address-btn">新增地址</button>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { navigateTo } from '../utils/navigate'
	import { onLoad } from '@dcloudio/uni-app'
	import http from '../api/request'
	import { getAddressMsg } from '../api/index'

	const loading = ref(false)


	// 跳转到添加地址页面(分包)
	const subAddressList = () => navigateTo('/subPages/addressList')

	// 添加用户地址信息接口请求
	const addressMsg = async () => {
		try {
			loading.value = true
			const res = await getAddressMsg()
		} catch (error) {
			console.error('获取地址信息失败:', error)
			uni.showToast({
				title: '获取地址信息失败',
				icon: 'none'
			})
		} finally {
			loading.value = false
		}
	}
	// 跳转到编辑信息(分包)
	const editAddress = () => navigateTo('/subPages/addressEdit')

	onLoad(() => {
		addressMsg()
	})
</script>

<style lang="scss">
	// 收货地址页面
	.address-page {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100vw;
		height: 100vh;

		// 暂无地址
		// .empty-address {
		// 	width: px2rpx(375);
		// 	height: px2rpx(196);
		// 	padding: px2rpx(32) 0;
		// 	display: flex;
		// 	flex-direction: column;
		// 	align-items: center;

		// 暂无地址图片
		// .empty-address-icon {}

		// 暂无地址文本
		// .empty-address-text {
		// 	text-align: center;
		// 	margin-top: px2rpx(16);
		// 	font-size: px2rpx(14);
		// 	padding: 0 px2rpx(60);
		// 	color: #969799;
		// }
		// }

		// 信息盒子
		.msg-box {
			width: px2rpx(351);
			height: px2rpx(70);
			padding: px2rpx(12);
			margin-bottom: px2rpx(12);

			// 信息区域
			.msg-area {
				width: px2rpx(307);
				height: px2rpx(70);
				margin-left: px2rpx(20);
				display: flex;
				flex-direction: row;
				justify-content: center;

				// 地址信息
				.msg-address {
					width: px2rpx(307);
					height: px2rpx(44);

					// 详细地址信息
					.msg-detailed-address {
						width: px2rpx(307);
						height: px2rpx(18);
					}
				}

				// 修改信息盒子
				.amend-msg-box {
					display: flex;
					align-items: center;
					width: px2rpx(44);

					// 修改信息
					.amend-msg {
						padding-left: px2rpx(15);
						width: px2rpx(20);
						height: px2rpx(20);
					}
				}
			}
		}

		// 添加地址按钮
		.add-address-btn {
			font-size: px2rpx(14);
			width: px2rpx(343);
			background-color: #ee0a24;
			color: white;
			margin-bottom: px2rpx(40);
			border-radius: px2rpx(999);
			height: px2rpx(50);
		}
	}
</style>